<template>
  <el-table :data="model.getList()" style="width: 100%;" height="70vh" @row-click="row => $emit('info', row)">
    <el-table-column :label="plugin.lang('order.code')">
      <template #default="scope">
        {{ scope.row.code }}<br />
        <el-link v-if="scope.row.code_key" type="warning" href="javascript:;" @click.stop="$emit('code', scope.row.code_key)">{{ scope.row.code_key }}</el-link>
      </template>
    </el-table-column>
    <el-table-column :label="plugin.lang('order.account_name')">
      <template #default="scope">
        {{ scope.row.account_name }}
      </template>
    </el-table-column>
    <el-table-column :label="plugin.lang('order.client_name')">
      <template #default="scope">
        <template v-if="scope.row.client_name">
          {{ scope.row.client_name }}<br>
        </template>
        <el-link href="javascript:;" type="primary" v-if="scope.row.remarks">{{ scope.row.remarks }}</el-link>
      </template>
    </el-table-column>
    <el-table-column :label="plugin.lang('order.ticket')">
      <template #default="scope">
        <el-tag 
          :type="scope.row.ticket == 'ticket' ? 'warning' : (scope.row.ticket == 'print' ? '' : 'danger')" 
          effect="plain"
        >
          {{ plugin.lang('order.ticket_text.' + scope.row.ticket) }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column :label="plugin.lang('order.count')" prop="count" align="center" />
    <el-table-column :label="plugin.lang('order.money')" prop="money" align="center">
      <template #default="scope">
        <el-link type="primary" href="javascript:;">{{ money(scope.row.money) }}</el-link>
      </template>
    </el-table-column>
    <el-table-column :label="plugin.lang('order.status_time')" width="150">
      <template #default="scope">
        {{ time.format(scope.row.status_time) }}
      </template>
    </el-table-column>
    <el-table-column fixed="right" width="200">
      <template #default="scope">
        <div style="text-align: right">
          <el-dropdown @command="command => $emit(command, scope.row)">
            <el-button type="primary" size="small" style="margin-left: 10px" @click.stop>{{ lang.t('common.active') }}<i class="iconfont mini icon-arrow-down el-icon--right"></i></el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="print">{{ lang.t('common.print') }}</el-dropdown-item>
                <el-dropdown-item command="printGift">{{ plugin.lang ('order.print_gift') }}</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import app from '@/app'
import model from '../../model'

export default {
  setup() {

    return {
      lang: app.lang,
      plugin: app.plugin.index,
      time: app.time,
      money: app.money,
      model,
    }
  }
}
</script>